<template>
  <li class="vt-list-item">
    <nuxt-link :to="to" class="item-link flx-bm bdt11-1px" :class="gap ? 'gap' : ''">
      <span class="item-txt">
        <slot></slot>
      </span>
      <span class="item-icon">
        <i :class="'fa fa-'+icon" aria-hidden="true"></i>
      </span>
    </nuxt-link>
  </li>
</template>

<script>
  export default {
    props: {
      to: {
        type: [Object, String],
        default(){
          return ''
        }
      },
      icon: {
        type: String,
        default(){
          return 'angle-right'
        }
      },
      gap: {
        type: Boolean,
        default(){
          return false
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import './index.styl';
</style>
